﻿<script src="../../Scripts/Cusotm.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('.button').click(function (e) {
            $('#source').quicksand($('#destination li'));
            e.preventDefault();
        })

        $('.callteaml').hover(function () {
            $(this).animate({
                left: '+0px'
            });
        }, function () {
            $(this).animate({
                left: '-90px'
            });
        });
        $('.callteamb').hover(function () {
            $(this).animate({
                bottom: '+0px'
            });
        }, function () {
            $(this).animate({
                bottom: '-90px'
            });
        });
        $('.callteamr').hover(function () {
            $(this).animate({
                right: '+0px'
            });
        }, function () {
            $(this).animate({
                right: '-90px'
            });
        });
        $('#startbutton').live('click', function () {
            $.each($('.teamicons'), function (j) {
                var y = 200 * j;
                $(this).animate({
                    opacity: 0
                }, 1000, 'linear', function () {
                    $('#startbutton').fadeOut('fast').remove();
                    $('.teamicons').remove();
                    $('.callteaml').show('slow');
                    $('.callteamb').show('slow');
                    $('.callteamr').show('slow');
                    $('.callteaml').animate({
                        left: '-100px'
                    }, 1000, function () { });
                    $('.callteamb').animate({
                        bottom: '-100px'
                    }, 1000, function () { });
                    $('.callteamr').animate({
                        right: '-100px'
                    }, 1000, function () { });
                });
            });
        });
        $.each($('.teamicons'), function (i) {
            var x = 150 + (i * 270);
            var y = 30;
            if (i > 3) {
                y = y + 200;
                x = ((i - 3) * 270) - 120;
            }
            $(this).animate({
                opacity: 0.6,
                left: '+=' + x,
                top: '+=' + y
            }, 1000, function () {
            });
        });
    });
</script>
<div class="teamicons" style="width: 150px; height: 150px; background-color: #ace6f4;
    border-radius: 10px; position: absolute; top: 30px; opacity: .2;">
</div>
<div class="teamicons" style="width: 150px; height: 150px; background-color: #ace6f4;
    border-radius: 10px; position: absolute; top: 30px; opacity: .2;">
</div>
<div class="teamicons" style="width: 150px; height: 150px; background-color: #ace6f4;
    border-radius: 10px; position: absolute; top: 30px; opacity: .2;">
</div>
<div class="teamicons" style="width: 150px; height: 150px; background-color: #ace6f4;
    border-radius: 10px; position: absolute; top: 30px; opacity: .2;">
</div>
<div class="teamicons" style="width: 150px; height: 150px; background-color: #ace6f4;
    border-radius: 10px; position: absolute; top: 30px; opacity: .2;">
</div>
<div class="teamicons" style="width: 150px; height: 150px; background-color: #ace6f4;
    border-radius: 10px; position: absolute; top: 30px; opacity: .2;">
</div>
<div class="teamicons" style="width: 150px; height: 150px; background-color: #ace6f4;
    border-radius: 10px; position: absolute; top: 30px; opacity: .2;">
</div>
<div class="teamicons" style="width: 150px; height: 150px; background-color: #ace6f4;
    border-radius: 10px; position: absolute; top: 30px; opacity: .2;">
</div>
<div id="startbutton" style="height: 40px; top: 80%; left: 46%; width: 100px; border-radius: 10px;
    background-color: #ace6f4; position: absolute; cursor: pointer;">
    <h3 style="margin: 15px;">
        START</h3>
</div>
@section left{
    <div class="callteaml" style="width: 150px; cursor: pointer; height: 150px; background-color: #ace6f4;
        border-radius: 10px; position: absolute; z-index: 100; left: 0px; top: 170px;
        opacity: .8; display: none;">
    </div>
    <div class="callteaml" style="width: 150px; cursor: pointer; height: 150px; background-color: #ace6f4;
        border-radius: 10px; position: absolute; z-index: 100; left: 0px; top: 430px;
        opacity: .8; display: none;">
    </div>
}
@section bottom{
    <div class="callteamb" style="width: 150px; cursor: pointer; height: 150px; background-color: #ace6f4;
        border-radius: 10px; position: absolute; z-index: 100; left: 160px; bottom: 0px;
        opacity: .8; display: none;">
    </div>
    <div class="callteamb" style="width: 150px; cursor: pointer; height: 150px; background-color: #ace6f4;
        border-radius: 10px; position: absolute; z-index: 100; left: 517px; bottom: 0px;
        opacity: .8; display: none;">
    </div>
    <div class="callteamb" style="width: 150px; cursor: pointer; height: 150px; background-color: #ace6f4;
        border-radius: 10px; position: absolute; z-index: 100; left: 874px; bottom: 0px;
        opacity: .8; display: none;">
    </div>
    <div class="callteamb" style="width: 150px; cursor: pointer; height: 150px; background-color: #ace6f4;
        border-radius: 10px; position: absolute; z-index: 100; left: 1233px; bottom: 0px;
        opacity: .8; display: none;">
    </div>
}
@section right
{
    <div class="callteamr" style="width: 150px; cursor: pointer; height: 150px; background-color: #ace6f4;
        border-radius: 10px; position: absolute; z-index: 100; right: 0px; top: 170px;
        opacity: .8; display: none;">
    </div>
    <div class="callteamr" style="width: 150px; cursor: pointer; height: 150px; background-color: #ace6f4;
        border-radius: 10px; position: absolute; z-index: 100; right: 0px; top: 430px;
        opacity: .8; display: none;">
    </div>
}
@*@section main
{
    @Html.Partial("Tree")
}*@
